---
order: 2
section: 1-Getting started
---

# Installation

Setup is required.
Install the [React](https://reactjs.org) package with `npm` or your package manager of choice.

```bash
npm install @compiled/react
```

Then configure your bundler of choice or use [Babel](https://babeljs.io) directly.

## Installation methods

### (Recommended) Parcel

Install the [Parcel v2](https://v2.parceljs.org) configuration.

```bash
npm install @compiled/parcel-config --save-dev
```

Add the compiled preset to your [Parcel config](https://parceljs.org/features/plugins/).

```json
{
  "extends": ["@parcel/config-default", "@compiled/parcel-config"]
}
```

See the [configuration package docs](/pkg-parcel-config) for configuration options.

### Webpack

> We recommend Parcel, as this will be more performant, and it aligns with the Atlassian recommended tech stack.

Install the [Webpack](https://webpack.js.org/) loader.

```bash
npm install @compiled/webpack-loader --save-dev
```

Add the loader to your [Webpack config](https://webpack.js.org/).
Make sure this is defined after other loaders so it runs first.

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' },
          {
            // ↓↓ defined last ↓↓
            loader: '@compiled/webpack-loader',
          },
        ],
      },
    ],
  },
};
```

If you're shipping an app, you'll also be interested in CSS extraction.
Read the [Webpack CSS extraction](/css-extraction-webpack) for a step-by-step guide.

See the [loader package docs](/pkg-webpack-loader) for configuration options.

### Babel

> **Local development** <br />
> When developing locally its advised to use a bundler instead of Babel directly for improved developer experience.

Install the [Babel](https://babeljs.io) plugin.

```bash
npm install @compiled/babel-plugin --save-dev
```

Add the plugin to your [Babel config](https://babeljs.io/docs/en/configuration).
Make sure this is defined after other plugins so it runs first.

```json
{
  "plugins": [
    // ↓↓ defined last ↓↓
    "@compiled/babel-plugin"
  ]
}
```

See the [plugin package docs](/pkg-babel-plugin) for configuration options.

## Installing the UI Styling Standard plugin

We recommend using Compiled with the [UI Styling Standard ESLint plugin](https://atlassian.design/components/eslint-plugin-ui-styling-standard/overview). This plugin ensures that the styles you write are performant, idiomatic, and easier to maintain.

Note that using this plugin will be a requirement for frontend developers at Atlassian.

## Ensuring Babel and TypeScript work with Compiled

To [use the `css` prop](/writing-css), you may need to update your TypeScript and Babel configuration so that those libraries are aware of Compiled.

There are two supported options you can take to set this up: automatic JSX pragma, or the classic JSX pragma. We recommend the automatic JSX pragma if you're not sure.

### Automatic JSX pragma

This requires TypeScript 4.1 or higher. In your [TypeScript configuration](https://www.typescriptlang.org/docs/handbook/jsx.html#configuring-jsx):

```json
// tsconfig.json

{
  "compilerOptions": {
    // ...
    "jsx": "react-jsx",
    "jsxImportSource": "@compiled/react"
  }
}
```

In your [Babel configuration](https://babeljs.io/docs/babel-plugin-transform-react-jsx):

```json
// babel.config.json

{
  "presets": [
    // ...
  ],
  "plugins": [
    // ...
    [
      // You can also set these options on @babel/preset-react
      // directly.
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "automatic",
        "importSource": "@compiled/react"
      }
    ]
  ]
}
```

If you don't want to set this globally, and instead want to set this on a per-file basis, you can use `/** @jsxImportSource @compiled/react */`. You can use this in conjunction with the `jsx-pragma` rule from our [ESLint plugin](/pkg-eslint-plugin) to have this added for you automatically.

```tsx
/** @jsxImportSource @compiled/react */
import { css } from '@compiled/react';

const someStyles = css({ /* ... */ });
const Button = <button css={someStyles}>Button text</Button>;
```

### Classic JSX pragma

In your [TypeScript configuration](https://www.typescriptlang.org/docs/handbook/jsx.html#configuring-jsx):

```json
// tsconfig.json

{
  "compilerOptions": {
    // ...
    "jsx": "react",
    "jsxFactory": "jsx",
    "jsxFragmentFactory": "React.Fragment"
  }
}
```

In your [Babel configuration](https://babeljs.io/docs/babel-plugin-transform-react-jsx):

```json
// babel.config.json

{
  "presets": [
    // ...
  ],
  "plugins": [
    // ...
    [
      // You can also set these options on @babel/preset-react
      // directly.
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "classic",
        "pragma": "jsx",
        "pragmaFrag": "React.Fragment"
      }
    ]
  ]
}
```

If you don't want to set this globally, and instead want to set this on a per-file basis, you can use `/** @jsx jsx */`, as well as `/** @jsxFrag React.Fragment */` if needed. You can use this in conjunction with the `jsx-pragma` rule from our [ESLint plugin](/pkg-eslint-plugin) to have `/** @jsx jsx */` added for you automatically.

```tsx
/** @jsx jsx */
import { css, jsx } from '@compiled/react';

const someStyles = css({ /* ... */ });
const Button = <button css={someStyles}>Button text</Button>;
```
